import styled from 'styled-components'
// import border from 'styles/border.js'

const SelectHeadTop = styled.div`
    height:.5rem;
    width:100%;
    background: #f2f2f2;
    color: #666;
    display:flex;
    align-items: center;
    justify-content: space-between; 
    .back-icon{
        display:inline-block;
        width:.25rem;
        height:.25rem;
        line-height:.25rem;
        background:url() no-repeat center;
        background-size:100% 100%;
    }
    .back-icon-outer{
        margin: 0 .1rem;
    }
    .search-icon-outer{
        margin: 0 .1rem;
    }
    .search-icon{
        display:inline-block;
        width:.3rem;
        height:.3rem;
        line-height:.25rem;
        background:url() no-repeat center;
        background-size:100% 100%;
    }
    .classification{
        font-size:.15rem
    }
`

const AppViewWrapper = styled.div`
    width:100%;
    height:100%;
    overflow:hidden;
    position:absolute;
    top:.5rem;
    left:0;
    bottom:3rem;
    
`
const ContainerAppView = styled.div`
    padding-top:0rem;
    padding-bottom:0rem;
    .b-scroll-content{
        display:flex;
    }
    
`
const LeftSideNavigation = styled.div`
    width: 0.76rem;
    border-right: 1px solid #efefef;
    overflow: hidden;
   
    .category_name{
        font-size: .15rem;
        height: .45rem;
        line-height: .45rem;
        overflow: hidden;
        text-align: center;
        a{
            color:#333;
            height:100%;
            width:100%;
        }
        .active{
            color:#fb7d34;
            font-size:.17rem;
            transition:all .2s ease;
        }
    }
    .list-navbar{
        
       
    }

`

const ListnavbarUl = styled.ul`
    padding: .1rem .15rem .1rem 0;
    background: #fefefe;
    overflow-y: auto;

`

const CategorynameLi = styled.li`
    font-size: .15rem;
    height: .45rem;
    line-height: .45rem;
    overflow: hidden;
    text-align: center;

`
 const RouterContainer = styled.div`
    height:100%;
    position:relative;
 `

 const RightSideProduction = styled.div`
    display:flex;
    flex:1;
 `
const RightSideProductionUl = styled.ul`
    width:100%;
    height:auto;

`

export {
    SelectHeadTop,
    AppViewWrapper,
    ContainerAppView,
    LeftSideNavigation,
    ListnavbarUl,
    CategorynameLi,
    RouterContainer,
    RightSideProduction,
    RightSideProductionUl
}